<template>
    <div class="toolbar">
        <el-tooltip
            effect="dark"
            content="沉浸阅读"
            placement="left"
        >
            <a class="my-4!" @click="toggleFullScreen">
                <svg class="icon" aria-hidden="true">
                    <use :xlink:href="isFullScreen ? '#icon-fullscreen-exit' : '#icon-fullscreen'"></use>
                </svg>
            </a>
        </el-tooltip>
        <el-tooltip
            effect="dark"
            content="笔记撰写"
            placement="left"
        >
            <a class="my-4!">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-book1"></use>
                </svg>
            </a>
        </el-tooltip>
        <el-tooltip
            effect="dark"
            content="回到顶部"
            placement="left"
        >
            <a class="my-4!">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-vertical-align-top"></use>
                </svg>
            </a>
        </el-tooltip>
    </div>
</template>
<script lang="ts" setup>
    import { ref, onMounted, onUnmounted } from 'vue';

    const isFullScreen = ref(false);

    // 实现全屏切换功能
    function toggleFullScreen() {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen().catch(err => {
            console.error('进入全屏失败:', err);
            });
        } else {
            if (document.exitFullscreen) {
            document.exitFullscreen();
            }
        }
    }
    // 监听全屏状态变化
    function handleFullScreenChange() {
        isFullScreen.value = !!document.fullscreenElement;
    }

    onMounted(() => {
        document.addEventListener('fullscreenchange', handleFullScreenChange);
    });

    onUnmounted(() => {
        document.removeEventListener('fullscreenchange', handleFullScreenChange);
    });
</script>
<style lang="scss" scoped>
    .toolbar{
        position: fixed; 
        bottom: 60px; 
        right: 20px;
        a{
            display:block; 
            width: 40px; 
            height: 40px; 
            background-color: #fff; 
            border-radius: 50%; 
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            svg{
                font-size: 16px; 
                color: #979797;
                margin:0;
                position: relative; 
                top:8px; left: 8px
            }
        }
    }
</style>